@@include('./tpl/header.html',{"title":"个人中心"})
@@include('./tpl/menu.html',{"name":"user"})
@@include('./tpl/user_menu.html',{})

<div class="pure-u-5-6 pure-g padding-left ">
    <div class="padding-bottom-xl"  style="border:1px solid #eee;">
        <div class="" >
            <div class="pure-g">
                <div class="pure-u-4-24 text-xl padding-left-xl padding-top-xs">
                    资料维护
                </div>

            </div>
            <form class="pure-form margin-top wt-userInfo-form">
                <div class="padding-bottom-sm pure-g">
                    <div class="pure-u-3-24 text-right padding-right-sm " style="line-height: 35px">
                        手机号
                    </div>
                    <div class="pure-u-7-24">
                        <input type="text" name="mobile" id="mobile" class="pure-input-1 text-sm " maxlength="11" placeholder="输入手机号" required>
                    </div>
                    <div class="pure-u-7-24 padding-left-xs text-sm text-danger padding-top-xxs" for="mobile"></div>
                </div>
                <div class="padding-bottom-sm pure-g">
                    <div class="pure-u-3-24 text-right padding-right-sm " style="line-height: 35px">
                        姓名
                    </div>
                    <div class="pure-u-7-24">
                        <input type="text" name="realName" id="realName" class="pure-input-1 text-sm " minlength="2" maxlength="4" placeholder="姓名" required>
                    </div>
                    <div class="pure-u-7-24 padding-left-xs text-sm text-danger padding-top-xxs" for="realName"></div>
                </div>
                <div class="padding-bottom-sm pure-g">
                    <div class="pure-u-3-24 text-right padding-right-sm " style="line-height: 35px">
                        证件类型
                    </div>
                    <div class="pure-u-7-24">
                        <select id="cardType" name="cardType">
                            <option value="11" >身份证</option>
                            <option value="12">护照</option>
                            <!--<option value="13">其他</option>-->
                        </select>
                    </div>
                    <div class="pure-u-7-24 padding-left-xs text-sm text-danger padding-top-xxs" for="cardType"></div>
                </div>
                <div class="padding-bottom-sm pure-g">
                    <div class="pure-u-3-24 text-right padding-right-sm " style="line-height: 35px">
                        证件号码
                    </div>
                    <div class="pure-u-7-24">
                        <input type="text" name="cardNo" id="cardNo" class="pure-input-1 text-sm "  placeholder="请填写证件号码" >
                    </div>
                    <div class="pure-u-7-24 padding-left-xs text-sm text-danger padding-top-xxs" for="cardNo"></div>
                </div>
                <div class="padding-bottom-sm pure-g">
                    <div class="pure-u-3-24 text-right padding-right-sm " style="line-height: 35px">
                        性别
                    </div>
                    <div class="pure-u-7-24" style="    line-height: 35px;">
                            <input id="gender" type="radio" name="gender" value="11" ><span class="padding-horizontal-sm">男</span>
                            <input  type="radio" name="gender" value="12"><span class="padding-horizontal-sm">女</span>
                    </div>
                    <div class="pure-u-7-24 padding-left-xs text-sm text-danger padding-top-xxs" for="gender"></div>
                </div>
                <div class="padding-bottom-sm pure-g">
                    <div class="pure-u-3-24 text-right padding-right-sm " style="line-height: 35px">
                        邮箱
                    </div>
                    <div class="pure-u-7-24">
                        <input type="text" name="email" id="email" class="pure-input-1 text-sm "  placeholder="请填写邮箱" >
                    </div>
                    <div class="pure-u-7-24 padding-left-xs text-sm text-danger padding-top-xxs" for="email"></div>
                </div>
                <div class="text-center text-sm wt-login-error margin-vertical-xs text-danger"></div>
                <div class="pure-u-9-24">
                </div>
                <div class="margin-top-xl  pure-g pure-u-12-24">
                    <button class="pure-button pure-button-xl pure-button-primary center ">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
</div>
@@include('./tpl/commonjs.html')
<script>
    $(function () {
        var userName=g.getCookie("mobile");
        var getUserInfo=function(user){
            $.when(commonser.getUserInfo({"userName":user}))
                    .done(function (resp) {
                        if (resp.success) {
                            $("#mobile").val(resp.result.mobile);
                            if(resp.result.realName!=null){
                                $("#realName").val(resp.result.realName)
                            }
                            if(resp.result.email!=null){
                                $("#email").val(resp.result.email)
                            }
                            if(resp.result.gender!=null){
                                $("input[name=gender][value="+resp.result.gender+"]").attr("checked",true);
                            }
                            if(resp.result.cardNo!=null){
                                $("#cardNo").val(resp.result.cardNo)
                            }
                            if(resp.result.cardType!=null){
                                $("#cardType").val(resp.result.cardType)
                            }
                        }
                        else {
                            layer.alert(resp.error);
                        }
                    })
        };
        getUserInfo(userName);


        $(".wt-userInfo-form").validate({
            rules: {
                mobile:{
                    mobilerule:true,
                },
                realName: {
                    zhcnrule:true
                },
                cardNo: {
                    isIdCardNo:true
                },
                email: {
                    email:true
                }
            },
            messages: {
                realName: {
                    required: "请输入姓名",
                    minlength: "姓名不能少于2个汉字",
                    maxlength: "姓名不能多于4个汉字"
                },
                mobile:{
                    required:"请输入手机号"
                },


            },
            errorPlacement:function(error,element) {
                $(element).closest("form").find("div[for='"+element.attr("id")+"']").append(error)
            },
            submitHandler:function(form) {
                var regdata = $(".wt-userInfo-form").form2Json();
                regdata.userName=userName
                console.log(regdata);
                upUserInfo(regdata)
            }
        });

       var upUserInfo=function(regdata){
           var req = $.extend({}, regdata); //默认参数
           $.when(commonser.upUserInfo(req))
                   .done(function (resp) {
                       if (resp.success) {
                           layer.alert(resp.result,function() {
                               g.go("/user.html");
                           });
                       }
                       else
                       {
                           layer.alert(resp.error);
                       }
                   })
       }
    })
</script>
@@include('./tpl/footer.html')